<template>
  <view>
    <BaseNavbar :title="title" />
    <view class="bindHotelCard">
      <view class="deviceCode">
        <view>设备编号</view>
        <view>{{ deviceInfo.device_sn ? deviceInfo.device_sn : "" }}</view>
      </view>
      <view class="hotelName" @click="selectHotel">
        <view>{{ vPointName }}名称</view>
        <view>{{ hotelName ? hotelName : "-选择" + vPointName + "-" }}</view>
      </view>
      <view class="roomNumber" v-if="false">
        <view>桌号</view>
        <view>
          <input type="text" placeholder="请输入设备桌号" v-model="room_num" />
        </view>
      </view>
    </view>
    <BaseButton class="bind" width="630" @onClick="bindHotel">绑 定</BaseButton>
    <BaseButton class="bind" width="630" @onClick="gotoAddPoint">
      新增{{ vPointName }}并绑定
    </BaseButton>
    <BaseButton
      class="bind"
      width="630"
      @onClick="goToDeviceDetail"
      v-show="isShowDetail"
    >
      设备详情</BaseButton
    >
  </view>
</template>

<script>
import BaseNavbar from "@/components/base/BaseNavbar.vue";
import BaseButton from "../../components/base/BaseButton.vue";
export default {
  components: { BaseNavbar, BaseButton },
  data() {
    return {
      title: "设备绑定",
      device_sn: "", //设备编号
      mid: "", //设备id
      isFromDevice: false, //设备来的
      deviceInfo: {}, // 设备信息
      isShowDetail: false,
      room_num: "",
      hotelName: "",
      hotel_id: "",
      isFromIndexScan: false, //首页扫码来的
    };
  },
  methods: {
    async getUMHotel() {
      let data = {
        mid: this.mid,
      };
      let rtnData = await this.$u.api.getUMHotel(data);
      if (rtnData) {
        this.deviceInfo = rtnData[0];
        this.room_num = this.deviceInfo.room_num;
        this.hotelName = this.deviceInfo.hotelName;
        this.hotel_id = this.deviceInfo.hotel_id;
        if (!this.deviceInfo.hotel_id) {
          // 未绑定点位
          let select_hotel = uni.getStorageSync("select_hotel");
          if (select_hotel) {
            this.hotelName = select_hotel.hotelName;
            this.hotel_id = select_hotel.hotel_id;
          }
        }
      }
    },
    bindHotel() {
      // 绑定点位
      let data = {
        hotel_id: this.hotel_id,
        mid: this.mid,
        room_num: this.room_num,
      };
      uni.setStorageSync("bindId_key", data);
      this.$u.api.bindHotel(data).then((res) => {
        this.isShowSuccess("绑定成功", 1, () => {}, true);
      });
    },
    selectHotel() {
      uni.navigateTo({
        url: `/pagesB/place/SelectPlace?from=home_device_bind_hotel`,
      });
    },
    goToDeviceDetail() {
      uni.navigateTo({
        url:
          "/pagesB/device/DeviceDetail?from=home_device_bind_hotel&mid=" +
          this.mid,
      });
    },
    gotoAddPoint() {
      if (this.deviceInfo.device_sn) {
        uni.navigateTo({
          url: `/pagesB/place/PlaceAdd?from=add_and_bind&device_sn=${this.deviceInfo.device_sn}&mid=${this.mid}`,
        });
      }
    },
  },
  onLoad(opt) {
    if (opt?.from) {
      if (opt.from == "device") {
        // 设备绑定来的
        this.isFromDevice = true;
      } else if (opt.from == "index_scan") {
        // 首页扫码来的
        this.isFromIndexScan = true;
      }
    }
    this.device_sn = opt?.device_sn;
    this.mid = opt?.mid;
    // 是否显示按钮

    if (this.vUserInfo.role_id > 1 && this.vButtonPermissions) {
      this.isShowDetail = true;
    } else {
      this.isShowDetail = false;
    }
    this.getUMHotel();
  },
  onShow(e) {
    let pages = getCurrentPages();
    let currPage = pages[pages.length - 1]; // 当前页
    if (currPage.data.item) {
      // 有值
      // 修改listData中值
      this.checkHotel = currPage.data.item;
      this.hotelName = this.checkHotel.hotelName;
      this.hotel_id = this.checkHotel.id;
      // 缓存数据
      uni.setStorage({
        key: "select_hotel",
        data: {
          hotelName: this.hotelName,
          hotel_id: this.hotel_id,
        },
      });
    }
    if (currPage.data.isDoRefresh == true) {
      // 是否刷新
      currPage.data.isDoRefresh = false;
      this.getUMHotel();
    }
  },
};
</script>

<style lang="scss">
page {
  background-color: $pageBgColor;
}
</style>
<style lang="scss" scoped>
.bindHotelCard {
  margin-top: 20rpx;
  height: 300rpx;
  width: 100%;
  background: white;
  font-size: 26rpx;
  color: $textBlack;
}

.deviceCode,
.hotelName {
  height: 100rpx;
  display: flex;
  flex-direction: row;
  align-content: center;
  align-items: center;
  margin-left: 35rpx;
  border-bottom: 1rpx solid #e5e5e5;
}

.roomNumber {
  height: 100rpx;
  display: flex;
  flex-direction: row;
  align-content: center;
  align-items: center;
  margin-left: 35rpx;
  border-bottom: 1rpx solid #e5e5e5;
  border-bottom: 0;
}

.deviceCode view:first-child,
.hotelName view:first-child,
.roomNumber view:first-child {
  margin-right: 30rpx;
}

.bind {
  margin-top: 50rpx;
}
.addBtn {
  margin-top: 50rpx;
}
</style>
